<template>
    <view class="container">
        <!-- 统计卡片 -->
        <view class="stat-cards">
            <view class="stat-card">
                <text class="label">总用户数</text>
                <text class="value">{{ statistics.totalUsers }}</text>
            </view>
            <view class="stat-card">
                <text class="label">今日新增</text>
                <text class="value">{{ statistics.todayNewUsers }}</text>
            </view>
            <view class="stat-card">
                <text class="label">实名认证数</text>
                <text class="value">{{ statistics.verifiedUsers }}</text>
            </view>
        </view>

        <!-- 搜索栏 -->
        <view class="search-bar">
            <view class="search-input">
                <image src="/static/images/admin/search.png"></image>
                <input 
                    type="text"
                    v-model="searchKey"
                    placeholder="搜索用户名/手机号"
                    @confirm="handleSearch"
                />
            </view>
            <view class="filter-btn" @tap="showFilter">
                <image src="/static/images/admin/filter.png"></image>
            </view>
        </view>

        <!-- 用户列表 -->
        <scroll-view 
            class="user-list"
            scroll-y
            @scrolltolower="loadMore"
            :refresher-enabled="true"
            :refresher-triggered="refreshing"
            @refresherrefresh="refresh"
        >
            <view 
                class="user-item"
                v-for="item in userList"
                :key="item.id"
                @tap="goToDetail(item)"
            >
                <view class="user-header">
                    <view class="user-basic">
                        <image class="avatar" :src="item.avatar" mode="aspectFill"></image>
                        <view class="info">
                            <view class="name-row">
                                <text class="nickname">{{ item.nickname }}</text>
                                <view 
                                    class="verify-tag"
                                    :class="{ verified: item.isVerified }"
                                >
                                    {{ item.isVerified ? '已实名' : '未实名' }}
                                </view>
                            </view>
                            <text class="phone">{{ item.phone }}</text>
                        </view>
                    </view>
                    <view class="user-status" :class="{ disabled: item.status === 'disabled' }">
                        {{ item.status === 'normal' ? '正常' : '已禁用' }}
                    </view>
                </view>

                <view class="user-data">
                    <view class="data-item">
                        <text class="label">注册时间</text>
                        <text class="value">{{ item.registerTime }}</text>
                    </view>
                    <view class="data-item">
                        <text class="label">订单数</text>
                        <text class="value">{{ item.orderCount }}</text>
                    </view>
                    <view class="data-item">
                        <text class="label">消费金额</text>
                        <text class="value">¥{{ item.totalSpent }}</text>
                    </view>
                </view>

                <view class="actions">
                    <button 
                        class="action-btn"
                        :class="{ warn: item.status === 'normal' }"
                        @tap.stop="handleStatusChange(item)"
                    >
                        {{ item.status === 'normal' ? '禁用' : '启用' }}
                    </button>
                    <button 
                        class="action-btn"
                        @tap.stop="handleReset(item)"
                    >
                        重置密码
                    </button>
                </view>
            </view>

            <!-- 加载更多 -->
            <view class="loading" v-if="loading">加载中...</view>
            <view class="no-more" v-if="noMore">没有更多了</view>
        </scroll-view>

        <!-- 筛选弹窗 -->
        <uni-popup ref="filterPopup" type="right">
            <view class="filter-popup">
                <view class="popup-header">
                    <text>筛选条件</text>
                    <view class="close-btn" @tap="hideFilter">×</view>
                </view>
                <view class="filter-content">
                    <view class="filter-section">
                        <view class="section-title">用户状态</view>
                        <view class="status-list">
                            <view 
                                class="status-item"
                                :class="{ active: selectedStatus === status.value }"
                                v-for="status in statusOptions"
                                :key="status.value"
                                @tap="selectStatus(status.value)"
                            >
                                {{ status.label }}
                            </view>
                        </view>
                    </view>
                    <view class="filter-section">
                        <view class="section-title">实名认证</view>
                        <view class="verify-list">
                            <view 
                                class="verify-item"
                                :class="{ active: verifyFilter === type.value }"
                                v-for="type in verifyOptions"
                                :key="type.value"
                                @tap="selectVerifyType(type.value)"
                            >
                                {{ type.label }}
                            </view>
                        </view>
                    </view>
                    <view class="filter-section">
                        <view class="section-title">注册时间</view>
                        <picker 
                            mode="date" 
                            :value="dateRange.start"
                            @change="handleStartDateChange"
                        >
                            <view class="date-picker">
                                <text>开始日期</text>
                                <text>{{ dateRange.start || '请选择' }}</text>
                            </view>
                        </picker>
                        <picker 
                            mode="date" 
                            :value="dateRange.end"
                            @change="handleEndDateChange"
                        >
                            <view class="date-picker">
                                <text>结束日期</text>
                                <text>{{ dateRange.end || '请选择' }}</text>
                            </view>
                        </picker>
                    </view>
                </view>
                <view class="popup-footer">
                    <button class="reset-btn" @tap="resetFilter">重置</button>
                    <button class="confirm-btn" @tap="confirmFilter">确定</button>
                </view>
            </view>
        </uni-popup>

        <!-- 操作确认弹窗 -->
        <uni-popup ref="confirmPopup" type="dialog">
            <uni-popup-dialog
                :type="confirmDialog.type"
                :title="confirmDialog.title"
                :content="confirmDialog.content"
                :before-close="true"
                @confirm="confirmDialog.confirm"
                @close="confirmDialog.close"
            />
        </uni-popup>
    </view>
</template>

<script>
import { 
    getUserList, 
    getUserStatistics, 
    changeUserStatus, 
    resetUserPassword 
} from '@/api/user'
import store from '@/utils/store'

export default {
    data() {
        return {
            statistics: {
                totalUsers: 0,
                todayNewUsers: 0,
                verifiedUsers: 0
            },
            searchKey: '',
            userList: [],
            page: 1,
            pageSize: 10,
            loading: false,
            refreshing: false,
            noMore: false,
            
            // 筛选条件
            selectedStatus: 'all',
            statusOptions: [
                { label: '全部', value: 'all' },
                { label: '正常', value: 'normal' },
                { label: '已禁用', value: 'disabled' }
            ],
            verifyFilter: 'all',
            verifyOptions: [
                { label: '全部', value: 'all' },
                { label: '已实名', value: 'verified' },
                { label: '未实名', value: 'unverified' }
            ],
            dateRange: {
                start: '',
                end: ''
            },
            
            // 确认弹窗配置
            confirmDialog: {
                type: 'info',
                title: '',
                content: '',
                confirm: () => {},
                close: () => {}
            }
        }
    },
    onLoad() {
        if (!store.isAdmin()) {
            uni.showToast({
                title: '无权限访问',
                icon: 'none'
            })
            setTimeout(() => {
                uni.switchTab({
                    url: '/pages/index/index'
                })
            }, 1500)
            return
        }
        
        this.loadStatistics()
        this.loadUserList()
    },
    methods: {
        // 加载统计数据
        async loadStatistics() {
            try {
                const res = await getUserStatistics()
                this.statistics = res
            } catch (error) {
                console.error('获取统计数据失败', error)
            }
        },
        
        // 加载用户列表
        async loadUserList(reset = false) {
            if (this.loading) return
            
            if (reset) {
                this.page = 1
                this.userList = []
                this.noMore = false
            }
            
            try {
                this.loading = true
                const params = {
                    page: this.page,
                    pageSize: this.pageSize,
                    keyword: this.searchKey,
                    status: this.selectedStatus,
                    isVerified: this.verifyFilter,
                    startDate: this.dateRange.start,
                    endDate: this.dateRange.end
                }
                
                const res = await getUserList(params)
                this.userList = [...this.userList, ...res.list]
                this.noMore = res.list.length < this.pageSize
                
                if (!this.noMore) {
                    this.page++
                }
            } catch (error) {
                console.error('获取用户列表失败', error)
            } finally {
                this.loading = false
                this.refreshing = false
            }
        },
        
        // 处理用户状态变更
        handleStatusChange(user) {
            const newStatus = user.status === 'normal' ? 'disabled' : 'normal'
            const title = newStatus === 'disabled' ? '禁用用户' : '启用用户'
            const content = newStatus === 'disabled' 
                ? '禁用后该用户将无法登录使用，是否继续？'
                : '是否确认启用该用户？'
            
            this.showConfirmDialog({
                type: newStatus === 'disabled' ? 'warn' : 'info',
                title,
                content,
                async confirm() {
                    try {
                        await changeUserStatus(user.id, newStatus)
                        uni.showToast({
                            title: '操作成功',
                            icon: 'success'
                        })
                        // 更新列表
                        const index = this.userList.findIndex(item => item.id === user.id)
                        if (index !== -1) {
                            this.userList[index].status = newStatus
                        }
                    } catch (error) {
                        uni.showToast({
                            title: '操作失败',
                            icon: 'none'
                        })
                    }
                }
            })
        },
        
        // 处理重置密码
        handleReset(user) {
            this.showConfirmDialog({
                type: 'info',
                title: '重置密码',
                content: '是否确认重置该用户的密码？重置后密码将通过短信发送给用户。',
                async confirm() {
                    try {
                        await resetUserPassword(user.id)
                        uni.showToast({
                            title: '重置成功',
                            icon: 'success'
                        })
                    } catch (error) {
                        uni.showToast({
                            title: '重置失败',
                            icon: 'none'
                        })
                    }
                }
            })
        },
        
        // 显示确认弹窗
        showConfirmDialog(config) {
            this.confirmDialog = {
                ...config,
                close: () => {
                    this.$refs.confirmPopup.close()
                }
            }
            this.$refs.confirmPopup.open()
        },
        
        // 其他方法（搜索、筛选、刷新等）与之前类似，这里省略
    }
}
</script>

<style lang="scss" scoped>
.container {
    min-height: 100vh;
    background-color: #f5f5f5;
    padding: 20rpx;
    
    // 1. 统计卡片样式
    .stat-cards {
        display: flex;
        gap: 20rpx;
        margin-bottom: 20rpx;
        
        .stat-card {
            flex: 1;
            background: #fff;
            border-radius: 12rpx;
            padding: 20rpx;
            
            .label {
                font-size: 24rpx;
                color: #666;
            }
            
            .value {
                display: block;
                font-size: 36rpx;
                color: #333;
                font-weight: bold;
                margin-top: 10rpx;
            }
        }
    }
    
    // 2. 搜索栏样式
    .search-bar {
        display: flex;
        gap: 20rpx;
        margin-bottom: 20rpx;
        
        .search-input {
            flex: 1;
            height: 72rpx;
            background: #fff;
            border-radius: 36rpx;
            display: flex;
            align-items: center;
            padding: 0 30rpx;
            
            image {
                width: 32rpx;
                height: 32rpx;
                margin-right: 10rpx;
            }
            
            input {
                flex: 1;
                height: 100%;
                font-size: 28rpx;
            }
        }
        
        .filter-btn {
            width: 72rpx;
            height: 72rpx;
            background: #fff;
            border-radius: 36rpx;
            display: flex;
            align-items: center;
            justify-content: center;
            
            image {
                width: 32rpx;
                height: 32rpx;
            }
        }
    }
    
    // 3. 用户列表项样式
    .user-list {
        height: calc(100vh - 240rpx);
        
        .user-item {
            background: #fff;
            border-radius: 12rpx;
            padding: 30rpx;
            margin-bottom: 20rpx;
            
            .user-header {
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin-bottom: 20rpx;
                
                .user-basic {
                    display: flex;
                    align-items: center;
                    
                    .avatar {
                        width: 80rpx;
                        height: 80rpx;
                        border-radius: 40rpx;
                        margin-right: 20rpx;
                    }
                    
                    .info {
                        .name-row {
                            display: flex;
                            align-items: center;
                            margin-bottom: 6rpx;
                            
                            .nickname {
                                font-size: 32rpx;
                                color: #333;
                                font-weight: bold;
                                margin-right: 12rpx;
                            }
                            
                            .verify-tag {
                                padding: 4rpx 12rpx;
                                background: #f5f5f5;
                                border-radius: 16rpx;
                                font-size: 20rpx;
                                color: #999;
                                
                                &.verified {
                                    background: #e8f5e9;
                                    color: #4caf50;
                                }
                            }
                        }
                        
                        .phone {
                            font-size: 26rpx;
                            color: #666;
                        }
                    }
                }
                
                .user-status {
                    padding: 6rpx 20rpx;
                    background: #e8f5e9;
                    border-radius: 20rpx;
                    font-size: 24rpx;
                    color: #4caf50;
                    
                    &.disabled {
                        background: #ffebee;
                        color: #f44336;
                    }
                }
            }
            
            .user-data {
                display: flex;
                background: #f9f9f9;
                border-radius: 8rpx;
                padding: 20rpx;
                margin-bottom: 20rpx;
                
                .data-item {
                    flex: 1;
                    text-align: center;
                    
                    &:not(:last-child) {
                        border-right: 1rpx solid #eee;
                    }
                    
                    .label {
                        font-size: 24rpx;
                        color: #999;
                        margin-bottom: 8rpx;
                        display: block;
                    }
                    
                    .value {
                        font-size: 28rpx;
                        color: #333;
                        font-weight: bold;
                    }
                }
            }
            
            .actions {
                display: flex;
                gap: 20rpx;
                
                .action-btn {
                    flex: 1;
                    height: 80rpx;
                    line-height: 80rpx;
                    text-align: center;
                    background: #f5f5f5;
                    border-radius: 40rpx;
                    font-size: 28rpx;
                    color: #333;
                    
                    &.warn {
                        background: #ffebee;
                        color: #f44336;
                    }
                }
            }
        }
    }
    
    // 4. 筛选弹窗样式
    .filter-popup {
        width: 600rpx;
        height: 100vh;
        background: #fff;
        
        .popup-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 30rpx;
            border-bottom: 1rpx solid #eee;
            
            text {
                font-size: 32rpx;
                font-weight: bold;
            }
            
            .close-btn {
                font-size: 40rpx;
                color: #999;
                padding: 10rpx;
            }
        }
        
        .filter-content {
            padding: 30rpx;
            
            .filter-section {
                margin-bottom: 40rpx;
                
                .section-title {
                    font-size: 28rpx;
                    color: #333;
                    margin-bottom: 20rpx;
                }
                
                .status-list,
                .verify-list {
                    display: flex;
                    flex-wrap: wrap;
                    gap: 20rpx;
                    
                    .status-item,
                    .verify-item {
                        padding: 10rpx 30rpx;
                        background: #f5f5f5;
                        border-radius: 28rpx;
                        font-size: 28rpx;
                        color: #666;
                        
                        &.active {
                            background: #07c160;
                            color: #fff;
                        }
                    }
                }
                
                .date-picker {
                    height: 88rpx;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    padding: 0 30rpx;
                    background: #f5f5f5;
                    border-radius: 12rpx;
                    margin-bottom: 20rpx;
                    
                    text {
                        font-size: 28rpx;
                        color: #333;
                        
                        &:last-child {
                            color: #666;
                        }
                    }
                }
            }
        }
        
        .popup-footer {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            padding: 30rpx;
            display: flex;
            gap: 20rpx;
            background: #fff;
            border-top: 1rpx solid #eee;
            
            button {
                flex: 1;
                height: 88rpx;
                line-height: 88rpx;
                border-radius: 44rpx;
                font-size: 32rpx;
                
                &.reset-btn {
                    background: #f5f5f5;
                    color: #333;
                }
                
                &.confirm-btn {
                    background: #07c160;
                    color: #fff;
                }
            }
        }
    }
    
    // 5. 加载状态样式
    .loading,
    .no-more {
        text-align: center;
        padding: 30rpx;
        font-size: 28rpx;
        color: #999;
    }
}
</style> 